<div id="app" class="row panel panel-body">

    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" data-operate-del="1"
           width="100%">

        <thead>
        <tr>
            <th width="40%" style="text-align: center; vertical-align: middle; " data-field="id">
                <div class="th-inner ">规格</div>
                <div class="fht-cell"></div>
            </th>
            <th width="12%" style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                <div class="th-inner ">库存</div>
                <div class="fht-cell"></div>
            </th>
            <th width="12%" style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                <div class="th-inner ">供货价</div>
                <div class="fht-cell"></div>
            </th>
            <th width="12%" style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                <div class="th-inner ">活动库存</div>
                <div class="fht-cell"></div>
            </th>
            <th width="12%" style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                <div class="th-inner ">活动价格</div>
                <div class="fht-cell"></div>
            </th>
            <th width="12%" v-if="!isView" style="text-align: center; vertical-align: middle; " data-field="shop.shopname">
                <div class="th-inner ">操作</div>
                <div class="fht-cell"></div>
            </th>
        </tr>
        </thead>
        <tbody >
        <tr v-for="(item,index) in skuItem" :key="index">
            <td style="text-align: center; vertical-align: middle; ">
                {{item.difference}}
            </td>
            <td style="text-align: center; vertical-align: middle; ">
                {{item.stock}}
            </td>
            <td style="text-align: center; vertical-align: middle; ">
                {{item.supply_price}}
            </td>
            <td style="text-align: center; vertical-align: middle; " v-if="!isView">
                <input v-if="item.join" class="form-control" type="text" v-model="item.activity_stock">
            </td>
            <td style="text-align: center; vertical-align: middle; " v-else>
                {{item.activity_stock}}
            </td>
            <td style="text-align: center; vertical-align: middle; " v-if="!isView">
                <input v-if="item.join" class="form-control" type="text" v-model="item.activity_price">
            </td>
            <td style="text-align: center; vertical-align: middle; " v-else>
                {{item.activity_price}}
            </td>
            <td style="text-align: center; vertical-align: middle; " v-if="!isView">
                <button v-if="!item.join" class="btn btn-success btn-xs" @click="set(index,'add')"><i class="fa fa-plus fa-fw"></i>参与</button>
                <button v-else class="btn btn-danger btn-xs"  @click="set(index,'remove')"><i class="fa fa-minus fa-fw"></i>不参与</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="col-xs-12 col-sm-8" v-if="!isView" style="position: fixed;bottom: 10px;left: 10%;">
        <button type="button" class="btn btn-success" @click="select">{:__('OK')}</button>
    </div>
</div>